// Local variables for reused colors
//light main text
$darkest   : #141419;

//light secondary
$darker    : #6C6C76;

//light disabled
$dark      : #B6B6C2;

//light border and buttons
$medium    : #DEDEE2;

//light inputs 
$light     : #EEEFF4;

//light sidebar and box
$lighter   : #F4F5FA;

//light body bg
$lightest  : #FFFFFF;

$primary   : #5876f0;
$secondary : $darker;
$link      : $primary;
$disabled  : $dark;
$success   : #27aa5e;
$warning   : #DAC342;
$error     : #fb437b;
$info      : #178fff;
//new style but do not confirm it will be used for all
$new-disabled: #dfe4f8;

$contrasted-dark: $darkest !default;
$contrasted-light: $lightest !default;

$selected: rgba($primary, .5);

:root {
  // Colors that will have text- and bg- helper classes created
  // value can also be map of default, default-text, hover-text, hover-bg, active-text,  active-bg)
  @include color-variables((
    default:    $light,
    muted:      $disabled,
    link:       (
      default-text: $link,
      hover-text:   lighten($link, 30%),
      active-text:  darken($link, 25%),
      default:      transparent,
      hover-bg:     transparent,
      active-bg:    transparent,
    ),
    primary:    $primary,
    secondary:  $secondary,
    success:    $success,
    info:       $info,
    warning:    $warning,
    error:      $error,
    darker:     $darker
  ), true);

  --body-bg                    : #{$lightest};
  --body-text                  : #{$darkest};
  --scrollbar-thumb            : #{$dark};
  --scrollbar-thumb-dropdown   : #{$lighter};
  --scrollbar-track            : transparent;
  --favorite-on                : #fccf0a;

  --header-bg                  : #{$lightest};
  --header-logo                : #{$lightest};
  --header-dropdown            : #317DB0;
  --header-height              : 60px;
  --nav-width                  : 220px;
  --nav-bg                     : #{$lighter};
  --nav-active                 : var(--primary);
  --nav-font-weight            : 500;
  --footer-bg                  : transparent;
  --footer-height              : 50px;

  --menu-bg                    : #2c3353;
  --menu-second-bg             : #3a4364;
  --menu-second-shadow-top     : linear-gradient(to bottom, #252b41 , #3a4364);
  --menu-second-shadow-bottom  : linear-gradient(to top, #252b41 , #3a4364);
  --menu-text                  : #fefefe;
  --menu-action-text           : #787aef;
  --menu-hover-bg              : #3a4364;

  --disabled-bg                : #{$new-disabled};
  --box-bg                     : #{$lighter};
  --border                     : #{$medium};
  --border-radius              : 2px;
  --outline                    : rgba(244,245,250,0.75);
  --outline-width              : 2px;

  --badge-success-bg           : #dff2e7;
  --badge-error-bg             : #{$error};
  --badge-warning-bg           : #{$warning};

  --accent-btn                 : #dfe4f8;
  --accent-btn-text            : #8d93f4;
  --overlay-bg                 : #{rgba($lighter, 0.75)};
  --shadow                     : #{rgba($dark, 0.75)};


  --dropdown-bg                : #{$lighter};
  --dropdown-border            : #{$medium};
  --dropdown-divider           : #{$medium};
  --dropdown-text              : #{$link};
  --dropdown-hover-text        : darken($link, 1%);
  --dropdown-hover-bg          : #{$selected};
  --dropdown-active-text       : var(--active-text);
  --dropdown-active-bg         : var(--active-bg);
  --dropdown-disabled-text     : var(--muted);
  --dropdown-disabled-bg       : #{$disabled};

  --input-text                 : #{$darkest};
  --input-label                : #{$secondary};
  --input-placeholder          : #{$disabled};
  --input-border               : var(--border);
  --input-bg                   : #{$light};
  --input-hover-bg             : var(--body-bg);
  --input-focus-bg             : #{$lightest};
  --input-disabled-text        : #{$dark};
  --input-disabled-bg          : #{$light};
  --input-disabled-border      : #{$medium};
  --input-disabled-placeholder : darken($medium, 10%);
  --input-addon-bg             : #{$medium};
  --input-checkbox-background  : #727bf5;

  --progress-bg                : #{$medium};
  --progress-divider           : #{$medium};

  --sortable-table-bg          : transparent;
  --sortable-table-header-bg   : transparent;
  --sortable-table-accent-bg   : #{$lighter};
  --sortable-table-accent-alt  : #{$lightest};
  --sortable-table-top-divider : var(--border);
  --sortable-table-body-divider : #{$darker};
  --sortable-table-selected-bg : #{$light};
  --sortable-table-th          : #535353;
  --sortable-table-td          : #7f7f7f;
  --sortable-table-td-a        : #178fff;
  --sortable-table-tr          : #f8fafd;

  --popover-bg                 : var(--body-bg);
  --popover-border             : var(--border);
  --popover-text               : var(--body-text);
  --popover-border-radius      : var(--border-radius);
  --tooltip-bg                 : rgba(69,69,69,.8);
  --tooltip-border             : var(--border);
  --tooltip-text               : #{$light};

  --tabbed-border              : #{$medium};
  --tabbed-container-bg        : #{$lighter};

  --diff-border                : var(--border);
  --diff-header-bg             : var(--nav-bg);
  --diff-header-border         : var(--border);
  --diff-header                : #{rgba($darkest, 0.3)};
  --diff-linenum-bg            : var(--nav-bg);
  --diff-linenum               : var(--muted);
  --diff-linenum-border        : var(--border);
  --diff-line-ins-bg           : $success;
  --diff-line-del-bg           : #{rgba($error, 0.75)};
  --diff-del-bg                : #{rgba($error, 0.3)};
  --diff-del-border            : #{$error};
  --diff-ins-bg                : #{rgba($success, 0.3)};
  --diff-ins-border            : #{rgba($success, 0.5)};
  --diff-chg-ins               : #{rgba($success, 0.25)};
  --diff-chg-del               : #{rgba($warning, 0.5)};

  --wm-tabs-bg                 : #{$medium};
  --wm-tab-bg                  : #{$light};
  --wm-closer-hover-bg         : #{$lighter};
  --wm-tab-active-bg           : #{$lighter};
  --wm-title-bg                : #{$lightest};
  --wm-title-border            : #{$medium};
  --wm-body-bg                 : #{$lighter};
  --wm-border                  : var(--border);
  --wm-tab-height              : 25px;

  --terminal-bg                : #{$darkest};
  --terminal-cursor            : var(--warning);
  --terminal-text              : #{$lightest};

  --logs-bg                    : #{$darkest};
  --logs-highlight             : #{$darkest};
  --logs-highlight-bg          : var(--warning);
  --logs-text                  : #{$lightest};

  --detail-top-label           : #{$darker};
}
